<div style="display: flex;padding: 10px;justify-content: flex-start; ">
    <div style="width:300px;height:500px; background-color:black; margin-left: 150px;display: flex;margin-right: 200px;flex-direction: column;">
        <div id="d1" style="width:100%;height:30px ; color:white;text-align: center; font-size: 25px;font-weight: 700;">
            Task List
        </div>
        <div style="margin-top: 20px;display: flex;padding-left:5px;padding-right: 5px; flex-direction: column;">
            <div id="{{item.id}}" class="tasks" *ngFor="let item of this.taskList">
                    {{item.name}}-----{{item.no}}
            </div>
            
        </div>
    </div>

    <div class="cal-container">
        <div class="cal-header">
                <div>

                </div>
                <div class="header-time">2022-06-04</div>
        </div>
        <div class="cal-body">
            <div id="test" style="border: 1px solid black; overflow-x:scroll; height: 100%;display: flex;">
         
            </div>  
        </div>
    </div>
</div>

